<!-- 03伪元素
    解释
    伪元素：用css做出来的和标签（左右大尖括号那种）效果基本一致的元素
    语法
    1.父元素::before{
                content:'内容';
                其他css属性;}
    2.父元素::after{
                content:'内容';
                其他css属性;}
    特点
    1.content属性必须写(没内容可以只写content：'';)
    2.伪元素是行内元素（不能改变宽高）
    3.before是父级的第一个子，after是父级的最后一个子
 -->


 <!DOCTYPE html>
 <html lang="en">
 <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        div{
            width: 400px;
            height: 400px;
            background-color: red;
        }
        div::before{
            content: '左青龙';
            width: 100px;
            height: 100px;
            display: inline-block;
            text-align: right;
            color: #249597;
        }
        div::after{
            content: '右白虎';
            width: 100px;
            height: 100px;
            display: inline-block;
            color: #d5f2f2;
        }
    </style>
 </head>
 <body>
    <div>中间一个二百五</div>
 </body>
 </html>